<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in imageList" :key="item.id">
            <el-image :src="item.imageUrl" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="10">
        <p>
          <el-link>主货号：{{ product.article }}</el-link>
        </p>
        <p>
          <el-link>销量：{{ item.soldInfo }}</el-link>
        </p>
        <p>
          <el-link>发售价：{{ product.authPrice }}</el-link>
        </p>
        <p>
          <el-link>品牌：{{ product.brandName }}</el-link>
        </p>
        <p>
          <el-link>发售时间：{{ product.sellDate }}</el-link>
        </p>
        <p>
          <el-link>标题：{{ product.title }}</el-link>
        </p>
      </el-col>
    </el-row>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="当前市价" name="first">
        <el-container>
          <el-container>
            <el-main>
              <el-checkbox v-model="noLeave" :checked="noLeave" @change="cutLeave">不看闲置/瑕疵</el-checkbox>
              <el-row :gutter="20">
                <el-col :span="6" v-for="(sale, index) in saleList" :key="index">
                  <el-card :body-style="{ padding: '0px' }">

                    <el-popover placement="right" width="400" trigger="click" @show="morePrice(sale.size)">
                      <p v-for="morePrice in morePriceData" :key="morePrice.id">
                        {{morePrice.name}}🔷{{morePrice.tradeTypeName}}
                        {{morePrice.price}}
                      </p>

                      <div style="padding: 14px;" slot="reference">
                        <div class="shoeSize">{{sale.size}}</div>
                        <div class="shoePrice">
                          <span v-for="(item,index) in sale.data" :key="index" :title="item.name" :style="item.lower?'color:red':''">
                            ￥{{ item.price||'-'}}
                          </span>
                        </div>
                      </div>
                    </el-popover>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
          <el-aside width="200px">
            <el-image v-for="(item,key) in saleData" :key="key" :title="item.name" :src="item.logoUrl" />
          </el-aside>
        </el-container>
      </el-tab-pane>

      <el-tab-pane label="交易记录" name="second">
        <el-select v-model="selectShoeSize" size="mini" @change="changeShoeSize" placeholder="尺码" :clearable="true">
          <el-option v-for="item in salePropertyList" :key="item.id" :label="item.size" :value="item.size" />
        </el-select>
        <el-select v-model="selectPlatform" size="mini" @change="changePlatform" placeholder="平台" :clearable="true">
          <el-option label="毒" value="du" />
          <el-option label="nice" value="nice" />
        </el-select>
        <template>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-table :data="leftSoldRecordList" fit>
                <el-table-column prop="transTimeFormat" label="时间">
                </el-table-column>
                <el-table-column prop="size" label="尺码">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="platformName" label="来源">
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <el-table :data="rightSoldRecordList" fit>
                <el-table-column prop="transTimeFormat" label="时间">
                </el-table-column>
                <el-table-column prop="size" label="尺码">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="platformName" label="来源">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-button @click="soldRecordPre" :disabled="soldCurrent<=1">上一页</el-button>
          <el-button @click="soldRecordNext" :disabled="!this.soldRecordList||this.soldRecordList.length<20">下一页</el-button>
        </template>
      </el-tab-pane>

      <el-tab-pane label="价格走势" name="third">暂未开放</el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import request from "@/utils/request";
import _ from "lodash";

export default {
  name: "ProductDetail",
  data() {
    return {
      item: {
        platformId: "",
        platform: "",
        soldInfo: "",
      },
      morePriceData: [],
      product: {},
      salePropertyList: [],
      imageList: [],
      saleList: [],
      saleData: {},
      listLoading: false,
      noLeave: false,
      // 不看闲置数据暂停交换区
      noLeaveSaleList: [],
      saleList2: [],
      activeName: "first",
      soldCurrent: 1,
      soldRecordData: null,
      soldRecordList: null,
      leftSoldRecordList: [],
      rightSoldRecordList: [],
      selectShoeSize: "",
      selectPlatform: null,
    };
  },
  mounted: function () {
    this.item.platform = this.$route.query.platform;
    this.item.platformId = this.$route.query.platformId;
    this.item.soldInfo = this.$route.query.soldInfo;
  },
  created() {
    this.listLoading = true;
    request({
      url: "/goods/detail",
      method: "post",
      data: this.item,
    })
      .then((res) => {
        const data = res.data;
        this.product = data.product;
        this.salePropertyList = data.salePropertyList;
        this.imageList = data.imageList;
        this.saleList = data.saleList;
        this.listLoading = false;
        return this.product.id;
      })
      .then((productId) => {
        request({
          url: "/goods/buy-now/" + productId,
          method: "post",
        }).then((res) => {
          let data = res.data;
          this.saleData = data;
          this.saleList = this.getSaleList(data);
          this.saleList2 = this.saleList;
        });
      });
  },
  methods: {
    soldRecordPre() {
      if (this.soldCurrent === 1) {
        return;
      }
      this.soldRecordList = null;
      this.soldCurrent = this.soldCurrent - 1;
      this.handleClick();
    },
    soldRecordNext() {
      if (!this.soldRecordList || this.soldRecordList.length < 20) {
        return;
      }
      this.soldRecordList = null;
      this.soldCurrent = this.soldCurrent + 1;
      this.handleClick();
    },
    changeShoeSize() {
      this.soldRecordList = null;
      this.soldCurrent = 1;
      this.handleClick();
    },
    changePlatform() {
      this.soldRecordList = null;
      this.soldCurrent = 1;
      this.handleClick();
    },
    handleClick(tab, event) {
      if (this.soldRecordList) {
        return;
      }
      request({
        url: "/goods/sold-record",
        method: "post",
        data: {
          productId: this.product.id,
          current: this.soldCurrent,
          size: this.selectShoeSize,
          platform: this.selectPlatform || null,
        },
      }).then((res) => {
        this.soldRecordData = res.data;
        this.soldRecordList = this.soldRecordData.soldList;
        this.leftSoldRecordList = _.slice(this.soldRecordList, 0, 10);
        this.rightSoldRecordList = _.slice(this.soldRecordList, 10);
      });
    },
    morePrice(size) {
      this.morePriceData = [];
      let temp = [];
      _.forEach(this.saleData, (v) => {
        const buyNowList = v.buyNowList;
        _.forEach(
          buyNowList,
          (r) => ((r.name = v.name), (r.platform = v.platform))
        );
        temp = _.concat(temp, buyNowList);
      });
      const temp1 = _.filter(temp, (e) => e.size === size);
      this.morePriceData = _.sortBy(temp1, "platform", "price");
    },
    cutLeave(noLeave) {
      if (this.noLeaveSaleList.length === 0) {
        this.noLeaveSaleList = this.getSaleList(this.saleData, true);
      }
      if (noLeave) {
        this.saleList = this.noLeaveSaleList;
      } else {
        this.saleList = this.saleList2;
      }
    },
    getSaleList(data, noLeave) {
      const temp = {};
      _.forEach(data, (plt) => {
        let buyNowList = plt.buyNowList;
        // 存最低价
        const temp1 = {};
        _.forEach(buyNowList, (buyNow) => {
          const size = buyNow.size;
          const price = buyNow.price;
          if (!temp1[size] || parseInt(temp1[size].price) > parseInt(price)) {
            if (!noLeave || buyNow.tradeType !== "leave") {
              temp1[size] = buyNow;
              temp1[size].name = plt.name;
              temp1[size].platform = plt.platform;
            }
          }
        });
        buyNowList = Object.values(temp1);

        _.forEach(buyNowList, (buyNow) => {
          const size = buyNow.size;
          if (!temp[size]) {
            temp[size] = [];
          }
          temp[size] = _.concat(temp[size], buyNow);
        });
      });
      const result = [];
      _.forEach(temp, (v, k) => {
        v = _.sortBy(v, "price");
        v[0].lower = true;
        result.push({ size: k, data: _.sortBy(v, "platform") });
      });
      return _.sortBy(result, "size");
    },
  },
};
</script>

<style scoped>
.el-carousel--horizontal {
  width: 500px;
}
p {
  height: 30px;
  line-height: 20px;
}
.app-container {
  width: 1200px;
  margin: auto;
}
.shoeSize {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  text-align: center;
}
.shoePrice {
  padding-top: 10px;
  font-size: 13px;
  text-align: center;
}
.el-col-6 {
  margin-bottom: 20px !important;
}
</style>
